<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>会员中心</p>
		</header>
		<div class="rollback">
        <i class="fa fa-angle-left" @click="goBack()"></i>
    </div> 
	<div class="content">
	<div class="top">
		<div class="card">
			<div class="user-info">
				<div class="user-info-left">
                <img :src="user.userImg ? user.userImg : require('../assets/userImg/yhtx01.png')" alt="用户头像">
				</div> 
				<div class="user-info-right">
					<h2>{{ user.userName }}</h2>
					<h2 v-show="user.member">尊贵的会员您好</h2>
					<h2 v-show="!user.member">点击下方去开通会员吧</h2>
				</div>
			</div>
			<!-- <div class="member-power">
				<p>会员尊享9.5折优惠</p>
				<p>可与其他优惠共享</p>
			</div> -->
		</div>
	</div>	
			
		
		<div class="superpower">
			<img src="../assets/super_power.png" alt="会员卡图片" class="vip-image">
		</div>
		
		<!-- 超级会员部分 -->
		<div class="supermember">
			<div class="left">
				<img src='../assets/super_member.png'>
				<h3>超级会员</h3>
				<!-- 转义字符 -->
				<p>&#8226; 每月享9.5折优惠</p>
			</div>
			<div class="right" @click="toPayDone">
				<!--转义字符 -->
				立即开通 &gt;
			</div>
		</div>
	</div>
</div>
</template>

<script>
	export default {
        name:'userVip',
		// 可以在这里添加组件的逻辑和数据
        data(){
            return{
                user: {
                    member:''
                }
            }
        },
        created(){
            this.user = this.$getSessionStorage('user');
        },
        methods:{
			toPayDone(){
				let url = `/UserController/getMember/${this.user.token.token}/30`
				this.$axios.put(url)
				.then(response =>{
					if(response.data.result !== null || response.data.result !== ''){
						alert('开通会员成功！');
						this.$router.push({path:'/payDone',query:{orderTotal: 9.9, isMember: true}});
					}
					else{
						alert('开通会员失败，请重试！')
					}		

				})
				.catch(error => {
					console.error(error);
				});
			},
            toOpenVip(){
                // this.$router.push({path:'/openVip'});
				
            },
			goBack(){
				this.$router.push({path:'/userCenter'})// 回退到上一页
			}
        }
	}
</script>

<style scoped>
	.wrapper {
		height: 100%;
		width: 100%;
	}

	/*********header部分********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #363636;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.rollback i{
    position: fixed;
    top: 4vw;
    left: 3vw;
    display: flex;
    align-items: center;
    cursor: pointer;

    color: #fff;
    font-size: 6vw;

    z-index: 2000;
 }
 .wrapper .top{
		width: 100%;
		height: 50vw;
		background-color: #363636;
		color: #644F1B;
		position: fixed;
		left: 0;
		top: 12vw;
		z-index: 1000;
		display: flex;
		flex-direction: column;
	}
.wrapper .top .card{
	position: fixed;
		top:22vw;
		width: 80%;
		padding: 4vw;
		left: 50%;
		height:50vw;
		transform: translate(-50%);

		background-color:#FEEDC1;
		border-radius: 20px;
		border: solid 1px #DDD;

		z-index: 2000;

		display: flex;
		flex-direction: column;

		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /*设置阴影*/

		overflow: auto; /* 添加溢出滚动属性 */
}
 .wrapper .user-info{
    width: 100%;
    margin-top: 12vw;
    display: flex; /* 使用Flexbox布局 */
    align-items: center;
}
.wrapper .content.card .member-power {
	font-size: 20vw; /* 设置字体大小 */
    font-weight: 400;
}
.wrapper .user-info .user-info-left{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .user-info .user-info-left img{
    border-radius: 50%;
    height: 16vw;
    margin-top:5vw ;
    margin-left: 10vw; /*设置图片与边框之间的左侧距离*/
    border: 4px solid #fff; /* 设置白色边框样式和颜色 */
}
.wrapper .user-info .user-info-right{
    margin-left: 7vw;
    margin-top:5vw ;
}
.wrapper .user-info .user-info-right p:first-child{
    font-size: 5vw; /* 设置字体大小 */
    font-weight: 400;
    color: #fff; /* 设置文字颜色 */
    border-radius: 10px;
}
	/* 新内容部分 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 60px;
	}

	
	.vip-image {
		max-width: 90%;
		/* 缩小图片大小 */
		height: auto;
		margin: 5px auto;
		/* 添加左右边距 */
		border-radius: 10px;
		/* 添加圆角 */
	}

	.discount-info {
		font-size: 18px;
	}

	.discount-rate {
		color: #0097FF;
		/* 蓝色 */
	}

	.red-text {
		color: red;
		/* 红色 */
	}

	/* 了解会员权益按钮样式 */
	.open-membership-button {
		display: block;
		width: 95%;
		max-width: 350px;
		/* 控制按钮最大宽度 */
		margin: 250px auto;
		/* 居中显示按钮并添加上下间距 */
		padding: 10px 20px;
		/* 调整按钮内边距 */
		background-color: #00aaff;
		color: #fff;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.open-membership-button:hover {
		background-color: #0077C0;
		/* 鼠标悬停时改变按钮颜色 */
	}
	.wrapper .superpower img{
		border-radius:5%;
		margin-top:75vw ;
		margin-left: 5vw; /* 设置图片与边框之间的左侧距离 */
		border: 4px solid #fff; /* 设置白色边框样式和颜色 */
}
	.wrapper .supermember {
		/*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
		width: 90%;
		margin: 0 auto;
		height: 11.5vw;
		background-color: #FEEDC1;
		margin-top:165vw;
		border-radius: 2px;
		color: #644F1B;
		position: fixed;
		display: flex;
		/* transform: translateX(-90%); */
		z-index: 2000;
		/* 分开靠左右两边 */
		justify-content: space-between;

		align-items: center;
	}

	.wrapper .supermember .left {
		display: flex;
		align-items: center;
		margin-left: 4vw;
		user-select: none;
	}

	.wrapper .supermember .left img {
		width: 6vw;
		height: 6vw;
		margin-right: 2vw;
	}

	.wrapper .supermember .left h3 {
		font-size: 4vw;
		margin-right: 2vw;
	}

	.wrapper .supermember .left p {
		font-size: 3vw;
	}

	.wrapper .supermember .right {
		font-size: 3vw;
		margin-right: 4vw;
		cursor: pointer;
	}
</style>
